<template>
    <div>
        <!--  可以用this.$emit来触发@getCount事件，但是问题就又来了
              分析：子组件什么时候把值传递给父组件

              -->
        <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
            <input id="test" class="mui-input-numbox" type="number" value="1"
            @change="countChanged" ref="numbox"/>
            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
        </div>
    </div>
</template>
<script>
    import mui from '../lib/mui/js/mui.js'
    export default {
        data(){
            return{

            }
        },
        mounted(){
            // mui在mui.init()中会自动初始化基本控件,但是 动态添加的Numbox组件需要手动初始化
           mui('.mui-numbox').numbox();
        },
        methods:{
            countChanged(){
                //每次当文本框的数据被改变的时候，立即把最新的数据，通过事件调用 传递给父组件
                console.log(this.$refs.numbox.value)//这里numberbox是给它的一个属性
                this.$emit('getCount',parseInt(this.$refs.numbox.value));
            },
        }
    }
</script>
<style lang="scss" scoped>

</style>